<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title></title>
  
  
  
  <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
  
  <!-- Extra Codiqa features -->
  <link rel="stylesheet" href="codiqa.ext.css">
  
  <!-- jQuery and jQuery Mobile -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
  <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  <script src="js/highstock.js"></script>
  <!-- Extra Codiqa features -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
   <script type="text/javascript">
        function stocker(comp)
        {
	        $.getJSON('http://appexplor.appspot.com/?comp='+comp, function(data) {

		        // create the chart
		        $('#container').highcharts('StockChart', {
			

			        rangeSelector : {
				        selected : 1
			        },

			        title : {
				        text : comp
			        },

			        series : [{
				        type : 'candlestick',
				        name : comp,
				        data : data,
				        dataGrouping : {
					        units : [
						        ['week', // unit name
						        [1] // allowed multiples
					        ], [
						        'month', 
						        [1, 2, 3, 4, 6]]
					        ]
				        }
			        }]
		        });
	        });
        }

        /* on load */
        $(function() {
	        $.getJSON('http://appexplor.appspot.com/?comp=YHOO', function(data) {

		        // create the chart
		        $('#container').highcharts('StockChart', {
			

			        rangeSelector : {
				        selected : 1
			        },

			        title : {
				        text : 'YAHOO'
			        },

                    credits: {
                        enabled: false
                    },

			        series : [{
				        type : 'candlestick',
				        name : 'YAHOO',
				        data : data,
				        dataGrouping : {
					        units : [
						        ['week', // unit name
						        [1] // allowed multiples
					        ], [
						        'month', 
						        [1, 2, 3, 4, 6]]
					        ]
				        }
			        }]
		        });
	        });
        });

		</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <h3>
            Market Watcher
        </h3>
        <div data-role="fieldcontain">
            <label for="selectmenu1">
                Choose a Firm:
            </label>
            <select onchange="stocker($('#selectmenu1').val())" id="selectmenu1" name="stocker" data-mini="true">
                <option value="YHOO">
                    Yahoo
                </option>
                <option value="GOOG">
                    Google
                </option>
                <option value="MSFT">
                    Microsoft
                </option>
            </select>
        </div>
    </div>
    <div data-role="content">
        <div id="container" style=""></div>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            :)
        </h3>
    </div>
</div>
</body>
</html>
